<template>
  <div class="app-wrapper">
    <networkhead />
    <div class="content">
      <div class="user">

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="个人信息" name="first">
            <el-form ref="edgeUserInfo" :model="edgeUserInfo" :rules="userInfoRules" auto-complete="on" label-position="left">
              <div class="detail">
                <div class="label">用户名：</div>
                <div>{{ userInfo.userName }}</div>
              </div>
              <div class="detail">
                <div class="label">姓名：</div>
                <div v-if="edgeUser" class="text">
                  <div>{{ userInfo.name }}</div>
                  <div class="edge" @click="changeEdge"><img src="../../assets/images/Shape.png" alt=""></div>
                </div>
                <div v-if="!edgeUser" class="input">
                  <el-form-item prop="nameValue">
                    <el-input
                      v-model="edgeUserInfo.nameValue"
                      clearable
                      size="small"
                      placeholder="请输入"
                      type="text"
                      name="nameValue"
                      tabindex="1"
                      auto-complete="off"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="detail">
                <div class="label">角色：</div>
                <div>{{ userInfo.roleName }}</div>
              </div>
              <!-- <div class="detail">
              <div class="label">所属组织：</div>
              <div>{{userInfo.role}}</div>
            </div> -->

              <div class="detail">
                <div class="label">手机号：</div>
                <div v-if="edgeUser" class="text">
                  <div>{{ userInfo.telephone }}</div>
                  <div class="edge" @click="changeEdge"><img src="../../assets/images/Shape.png" alt=""></div>
                </div>
                <div v-if="!edgeUser" class="input">
                  <el-form-item prop="phoneValue">
                    <el-input
                      v-model="edgeUserInfo.phoneValue"
                      clearable
                      size="small"
                      placeholder="请输入"
                      type="text"
                      name="nameValue"
                      tabindex="2"
                      auto-complete="off"
                    />
                  </el-form-item>
                </div>
              </div>
              <div v-if="!edgeUser" class="btnsubmit">
                <el-button
                  type="primary"
                  class="create"
                  @click.native.prevent="submitData"
                >保存</el-button>
                <el-button
                  type="primary"
                  class="cancel"
                  @click="cancel"
                >取消</el-button>
              </div>
            </el-form>

          </el-tab-pane>

          <el-tab-pane label="修改密码" name="second">
            <el-form ref="passwordInfo" :model="passwordInfo" :rules="passwordInfoRules" auto-complete="on" label-position="left">
              <div class="detail">
                <div class="label">旧密码：</div>
                <div class="input">
                  <el-form-item prop="oldPassword">
                    <el-input
                      :key="passwordType"
                      v-model="passwordInfo.oldPassword"
                      :type="passwordType"
                      clearable
                      size="small"
                      placeholder="请输入"
                      name="oldPassword"
                      tabindex="1"
                      auto-complete="off"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="detail">
                <div class="label">新密码：</div>
                <div class="input">
                  <el-form-item prop="newPassword">
                    <el-input
                      :key="passwordType"
                      v-model="passwordInfo.newPassword"
                      :type="passwordType"
                      clearable
                      size="small"
                      placeholder="请输入"
                      name="newPassword"
                      tabindex="2"
                      auto-complete="off"
                    />
                  </el-form-item>
                </div>
              </div>
              <div class="detail">
                <div class="label">确认密码：</div>
                <div class="input">
                  <el-form-item prop="surePassword">
                    <el-input
                      :key="passwordType"
                      v-model="passwordInfo.surePassword"
                      :type="passwordType"
                      clearable
                      size="small"
                      placeholder="请输入"
                      name="surePassword"
                      tabindex="3"
                      auto-complete="off"
                    />
                    <!-- <span class="show-pwd" @click="showPwd">
                      <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                    </span> -->
                  </el-form-item>
                </div>
              </div>
              <div class="btnsubmit" style="margin-left: 73px;">
                <el-button
                  type="primary"
                  class="create"
                  @click.native.prevent="submitPwd"
                >保存</el-button>
              </div>
            </el-form>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

  </div>
</template>

<script>
import { Message } from 'element-ui'
import Networkhead from '../network/components'
import { getCurrentUserInfo, updateUserInfo, updatePassword } from '@/api/user'
export default {
  name: 'UserCenter',
  components: { Networkhead },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length <= 20 && value.length >= 8) {
        callback()
      } else {
        callback(new Error('密码由8-20个大小写字母、数字、特殊字符组成'))
      }
    }
    const validateNewPassword = (rule, value, callback) => {
      if (value === this.passwordInfo.newPassword) {
        callback()
      } else {
        callback(new Error('两次密码输入的不一致,请重新填写'))
      }
    }
    return {
      dataTime: [],
      userInfo: {},
      edgeUserInfo: {
        nameValue: '',
        phoneValue: ''
      },
      passwordInfo: {
        oldPassword: '',
        newPassword: '',
        surePassword: ''
      },
      activeName: 'first',
      edgeUser: true,
      passwordType: 'text',
      passwordInfoRules: {
        oldPassword: [
          { required: true, trigger: 'blur', validator: validatePassword },
          { min: 8, max: 20, message: '密码由8-20个大小写字母、数字、特殊字符组成' },
          { pattern: /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).{8,20}$/, message: '密码由8-20个大小写字母、数字、特殊字符组成' }
        ],
        newPassword: [
          { required: true, trigger: 'blur', validator: validatePassword },
          { min: 8, max: 20, message: '密码由8-20个大小写字母、数字、特殊字符组成' },
          { pattern: /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).{8,20}$/, message: '密码由8-20个大小写字母、数字、特殊字符组成' }
        ],
        surePassword: [
          { required: true, trigger: 'blur', validator: validateNewPassword }
        ]
      },
      userInfoRules: {
        nameValue: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        phoneValue: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '手机号格式错误' }
        ]
      },
      loading: false
    }
  },
  computed: {

  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    handleClick(tab, event) {
      this.passwordInfo = {
        oldPassword: '',
        newPassword: '',
        surePassword: ''
      }
    },
    // 用户详细
    async getUserInfo() {
      const res = await getCurrentUserInfo()
      if (res.code === 200) {
        this.userInfo = res.data
        this.edgeUserInfo.nameValue = this.userInfo.name
        this.edgeUserInfo.phoneValue = this.userInfo.telephone
      }
    },
    changeEdge() {
      this.edgeUser = false
    },
    cancel() {
      this.edgeUser = true
      this.edgeUserInfo.nameValue = this.userInfo.name
      this.edgeUserInfo.phoneValue = this.userInfo.telephone
    },
    submitData() {
      this.$refs.edgeUserInfo.validate(valid => {
        if (valid) {
          this.loading = true
          this.userInfo.name = this.edgeUserInfo.nameValue
          this.userInfo.telephone = this.edgeUserInfo.phoneValue
          updateUserInfo(this.userInfo).then((res) => {
            if (res.code === 200) {
              Message({
                message: '修改成功!',
                type: 'success',
                showClose: true,
                duration: 2 * 1000
              })
              this.edgeUser = true
            } else {
              Message({
                message: res.data.msg,
                type: 'error',
                showClose: true,
                duration: 2 * 1000
              })
            }
          })
        }
      })
    },
    async submitPwd() {
      if (this.passwordInfo.oldPassword !== '' && this.passwordInfo.newPassword !== '' && this.passwordInfo.surePassword !== '') {
        this.loading = true
        const data = {
          id: this.userInfo.id,
          newPassword: this.passwordInfo.newPassword,
          oldPassword: this.passwordInfo.oldPassword
        }
        updatePassword(data).then((res) => {
          if (res.code === 200) {
            Message({
              message: '修改成功!',
              type: 'success',
              showClose: true,
              duration: 2 * 1000
            })
            this.edgeUser = true
          } else {
            Message({
              message: res.data.msg,
              type: 'error',
              showClose: true,
              duration: 2 * 1000
            })
          }
        })
      }
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/variables';
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
     .user{
        padding: 32px 110px;
        .detail{
          display: flex;
          font-size:$fontSize14;
          font-weight:400;
          color:rgba(255,255,255,0.65);
          margin: 10px 0 20px 0;
          .label{
            width: 72px;
            text-align: left;
            font-size:14px;
            font-weight:400;
            color:rgba(247,181,0,0.8);
          }
          .input{
            margin-top: -7px;
          }
        }
        .text{
          display: flex;
        }
        .edge{
          margin-left: 44px;
          cursor: pointer;
        }
        .btnsubmit{
              // text-align: center;
              display: inherit;
              margin-left: 20px;
                .create{
                  cursor: pointer;
                  padding: 7px 10px 7px 10px;
                  border-radius: 2px;
                  font-size: 14px;
                  font-weight: 400;
                  color: rgba(255,255,255,1);
                  width:60px;
                  height:32px;
                  margin-right: 5px;
                  background:$btnactiveColor;
                }
                .cancel{
                  cursor: pointer;
                  padding: 7px 10px 7px 10px;
                  border-radius: 2px;
                  font-size: 14px;
                  font-weight: 400;
                  color: rgba(255,255,255,0.8);
                  width:60px;
                  height:32px;
                  background:$btnNoNativeColor;
                  opacity:0.4;
                }
        }
     }
    }
  }
</style>
